<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>ECharts</title>
        <style>
            .canvas {
                width: 540px;
                height: 400px;
                margin: 10px 20px;
                float: left;
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <!-- 通过CDN服务器导入ECharts库 -->
        <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.min.js"></script>
        <!-- 通过下面的JavaScript代码实现图表渲染 -->
        <script>
            let daysOfMonth = [0, 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
            for (let m = 1; m <= 12; ++m) {
                let d = daysOfMonth[m]
                // 通过异步网络请求从数据接口获取数据，获取到数据以后通过echarts进行渲染
                fetch(`http://127.0.0.1:5000/api/stocks?start=2017-${m}-1&end=2017-${m}-${d}`)
                    .then(resp => resp.json())
                    .then(json => {
                        // 动态创建标签
                        let div = document.createElement('div')
                        // 修改标签的class属性（设置样式）
                        div.className = "canvas"
                        // 将div加入body标签
                        document.body.appendChild(div)
                        let myChart = echarts.init(div)
                        // 定制K线图的图表数据和选项
                        let option = {
                            title: {
                                text: `2017年${m}月`,
                                left: '40%'
                            },
                            xAxis: {
                                data: json.x_axis
                            },
                            yAxis: {
                                scale: true,
                            },
                            series: [{
                                type: 'k',
                                data: json.y_axis
                            }]
                        }
                        // 通过绘图的setOption方法传入数据和参数
                        myChart.setOption(option)
                    })
            }
        </script>
    </body>
</html>